<template>
	<view class="content">
        <u-navbar :is-back="true" back-icon-color="#000" title="问卷详情" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <view slot="right" style="padding-right: 20rpx;font-size: 30rpx;" @click="$gTo('../question/test-rank?id=' + id)">
                答题记录
            </view>
        </u-navbar>
        
        <view class="box">
            <view class="title">{{data.title}}</view>
            <view class="u-p-b-10 u-font-24">楼盘名称：{{data.name}}</view>
            <view class="u-p-b-10 u-font-24">活动时间：{{data.start_time}}</view>
            <view class="u-p-b-10 u-font-24">出题人：{{data.user_name}}</view>
        </view>
        
        <view class="box">
            <view class="tit">考题试题</view>
            <view class="ques" v-for="(item,index) in data.question" :key="index">
                <view class="ques-tit">{{index + 1}}、{{item.question}}</view>
                <view class="option" :class="{active : el.status == 1}" v-for="(el, ind) in item.options" :key="ind">
                    {{el.letter}}. {{el.options}}
                </view>
                <view class="score">分值：{{item.score}}分</view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
				id: '',
				data: {},
			}
		},
		onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
			this.id = option.id;
			this.getData()
		},
		methods: {
			// 获取详情
			getData() {
				this.$ajax('question_activity_detail', {
                    user_token: this.$getSync('userToken'),
					id: this.id,//试卷id
				}).then(ret => {
					if (ret.success == 1000) {
						this.data = ret.detail
					} else {
						this.$toast(ret.msg);
					}
				});
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
		}
	}
</script>

<style lang="scss">
    
	page {
		background: #f5f5f5;
	}
	.content {
		padding: 20rpx;
	}
    .box{
        background-color: #fff;
        padding: 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .title{
        font-weight: bold;
        padding-bottom: 15rpx;
    }
    
    .tit{
        color: #00a1e9;
        font-weight: bold;
    }
    .ques{
        padding: 20rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .ques:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }
    .ques-tit{
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .option{
        color: #808080;
        padding-bottom: 5rpx;
    }
    .active{
        color: #218953;
        font-weight: bold;
    }
    .score{
        color: #f37169;
        padding-top: 15rpx;
    }


</style>
